<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <com @func="receive"></com>
        <h1>{{msg}}</h1>
    </div>


    <template id="com">
        <div>
            <input type="text" v-model="son"/>
            <button @click="give">传值</button>
        </div>
    </template>
    <script>


        var com={
            template: "#com",
            data(){
                return{
                    son:'子组件中的信息'
                }
            },
            methods: {
                give(){
                    this.$emit('func',this.son);
                }
            }
        };

        var vm=new Vue({
            el:"#app",
            data:{
                msg:'等待子组件传值过来'
            },
            methods:{
                receive(son){
                    this.msg=son;
                }
            },
            components:{
                com
            }
        })
    </script>
</body>
</html>